<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 新 Bootstrap 核心 CSS 文件 -->
		<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		 
		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		 
		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		
		<script>
			function calc(){
				sal = document.getElementById("salary").value; /* document表整个网页 */
				salnum = parseInt(sal);/* 将页面提取的字符串转换为数字以便下列计算 */
				
				/* 养老个人与养老公司 */
				ylgr01 = salnum * 0.08;
				ylgs01 = salnum * 0.2;
				// $(#ylgr).text(ylgr01);
				document.getElementById("ylgr").innerText = ylgr01;
				document.getElementById("ylgs").innerText = ylgs01;
				
				/* 医保个人与医保公司 */
				ybgr01 = salnum * 0.02500
				ybgs01 = salnum * 0.06;
				document.getElementById("ybgr").innerText = ybgr01;
				document.getElementById("ybgs").innerText = ybgs01;
				
				/* 失业个人与事业公司 */
				sygr01 = salnum * 0.005;
				sybx01 = salnum * 0.015;
				document.getElementById("sygr").innerText = sygr01;
				document.getElementById("sybx").innerText = sybx01;
				
				/* 工伤公司 */
				gsgs01 = salnum * 0.005;
				document.getElementById("gsgs").innerText = gsgs01;
				
				/* 生育公司 */
				sygs01 = salnum * 0.008;
				document.getElementById("sygs").innerText = sygs01;
				
				/* 公积金个人与公积金公司 */
				gjjgr01 = salnum * 0.12;
				gjjgs01 = salnum * 0.12;
				document.getElementById("gjjgr").innerText = gjjgr01;
				document.getElementById("gjjgs").innerText = gjjgs01;
				
				/* 个人合计与公司合计*/
				grhj01 = ylgr01 + ybgr01 + sygr01 + gjjgr01;
				gshj01 = ylgs01 + ybgs01 + sybx01 + gsgs01 + sygs01 + gjjgs01;
				document.getElementById("grhj").innerText = grhj01;
				document.getElementById("gshj").innerText = gshj01;
				
				/* 总额 */
				total01 = salnum + gshj01;
				document.getElementById("total").innerText = total01;
			}
		</script>
		
	</head>
	<body>
		<div class="container text-center">
			<h2>个人社保计算软件</h2>
			<table class="table-bordered text-center table">
				<td>工资</td>
				
				<td colspan="3">
					<input id="salary" type="text" />
				</td>
				
				<td>
					<button onclick="calc()" class="btn btn-danger btn-block">计算</button>
				</td>
				
				<tr class="bg-primary">
					<td>险种</td>
					<td>个人（%）</td>
					<td>个人</td>
					<td>公司（%）</td>
					<td>公司</td>
				</tr>
				
				<tr>
					<td class="bg-info">养老</td>
					<td>8%</td>
					<td id="ylgr"></td>
					<td>20%</td>
					<td id="ylgs"></td>
				</tr>
				
				<tr>
					<td class="bg-info">医保</td>
					<td>2%</td>
					<td id="ybgr"></td>
					<td>6%</td>
					<td id="ybgs"></td>
				</tr>
				
				<tr>
					<td class="bg-info">失业</td>
					<td>0.5%</td>
					<td id="sygr"></td>
					<td>1.5%</td>
					<td id="sybx"></td>
				</tr>
				
				<tr>
					<td class="bg-info">工伤</td>
					<td></td>
					<td></td>
					<td>0.5%</td>
					<td id="gsgs"></td>
				</tr>
				
				<tr>
					<td class="bg-info">生育</td>
					<td></td>
					<td></td>
					<td>0.8%</td>
					<td id="sygs"></td>
				</tr>
				
				<tr>
					<td class="bg-info">公积金</td>
					<td>12%</td>
					<td id="gjjgr"></td>
					<td>12%</td>
					<td id="gjjgs"></td>
				</tr>
				
				<tr>
					<td class="bg-info">合计</td>
					<td>个人合计</td>
					<td id="grhj"></td>
					<td>公司合计</td>
					<td id="gshj"></td>
				</tr>
				
				<tr>
					<td class="bg-info">总额</td>
					<td colspan="4" id="total"></td>
				</tr>
				
			</table>
			开发者：龙凯
		</div>
	</body>
</html>
